<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="!crud.props.searchToggle">
        <el-form size="small" label-width="100px" ref="form" :model="query">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="业务开始日期" prop="startDate">
                <el-date-picker
                  v-model="query.startTime"
                  type="date"
                  style="width: 100%;"
                  default-value
                  format="yyyy - MM - dd "
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="业务结束日期" prop="endDate">
                <el-date-picker
                  v-model="query.endTime"
                  type="date"
                  style="width: 100%;"
                  default-value
                  format="yyyy-MM-dd "
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <rrOperation :crud="crud"/>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table ref="table" stripe border v-loading="crud.loading" :row-class-name="crud.tableRowClassName"
                :data="crud.data"
                size="small" style="width: 100%;"
                :show-summary="true"
                sortable="custom"
                @sort-change="crud.sortChange"
                @selection-change="crud.selectionChangeHandler"
                @cell-dblclick="(row, column)=>cellDblclick(row, column)"
      >
        <el-table-column :render-header="crud.renderHeader" type="selection" width="60"/>
        <el-table-column :render-header="crud.renderHeader" type="index" width="60" label="序号"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('busDate')" prop="busDate"
                         label="业务日期"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('sourceCode')" prop="sourceCode"
                         label="单据编号"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('inAmount')" prop="inAmount"
                         label="收入金额"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('cancelAmount')" prop="cancelAmount"
                         label="已核销金额"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('balanceAmount')" prop="balanceAmount"
                         label="余额"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('remark')" prop="remark" label="备注"/>
      </el-table>
      <!--分页组件-->
      <pagination/>
    </div>
    <!--核销明细-->
    <el-dialog :close-on-click-modal="false" title="客户收款余额核销明细"
               :visible.sync="showDialog" width="1000px">
      <el-table ref="table" stripe border v-loading="crud.loading" :data="detailTableData" size="small"
                style="width: 100%;"
                :show-summary="true">
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('busDate')" prop="busDate"
                         label="业务日期"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('sourceCode')" prop="sourceCode"
                         label="单据编号"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('initAmount')" prop="initAmount"
                         label="核销前金额"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('cancelAmount')" prop="cancelAmount"
                         label="核销金额"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('balanceAmount')" prop="balanceAmount"
                         label="余额"/>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="showDialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getFinanceCustomerBalanceCancel} from '@/api/erp/financeCustomerBalanceCancel'
import CRUD, {crud, header, presenter} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import jtgSelectPlus from '@/components/select/JtgSelectPlus'
// crud交由presenter持有
const defaultCrud = CRUD({
  title: '客户余额明细',
  params() {
    const href = location.href.split('/')
    return {
      customerId: href[href.length - 1] == 'add' ? 0 : href[href.length - 1],
    }
  },
  url: '/api/financeCustomerBalanceFlow', sort: 'id,desc', crudMethod: {}
})
export default {
  name: 'FinanceCustomerBalanceDetail',
  components: {pagination, crudOperation, rrOperation, udOperation, jtgSelectPlus},
  mixins: [presenter(defaultCrud), header(), crud()],
  dicts: ['t_buy_order_source_type', 'common_order_status', 't_buy_order_buy_channel'],
  data() {
    return {
      id: null,
      permission: {
        add: ['admin', 'buyProtocolDetail:add'],
        edit: ['admin', 'buyProtocolDetail:edit'],
        del: ['admin', 'buyProtocolDetail:del'],
        import: ['admin', 'buyProtocolDetail:import'],
        export: ['admin', 'buyProtocolDetail:export'],
        copy: ['admin', 'buyProtocolDetail:copy'],
        upload: ['admin', 'buyProtocolDetail:upload'],
        download: ['admin', 'buyProtocolDetail:download'],
      },
      productList: [],
      showDialog: false,
      detailTableData: []
    }
  },
  beforeUpdate() {
    if (this.$route.params.id != 'add') {
      this.id = this.$route.params.id
      this.crud.order.id = this.id
    }
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },
    cellDblclick(row, column) {
      if ("单据编号" === column.label) {
        const {sourceId} = row
        this.$router.push({path: '/finance/financeCustomerReceiptDetail/' + sourceId})
      } else {
        const {sourceCode: receiptPaymentCode} = row
        getFinanceCustomerBalanceCancel({receiptPaymentCode}).then(res => {
          console.log(res);
          const {data: {content}} = res
          this.detailTableData = content
          this.showDialog = true
        })
      }
    }
  }
}
</script>

<style scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
</style>
